<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>repeating-linear-gradient-重复线性渐变</title>
	</head>

	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<style>
			div.box1 {
				float: left;
				height: 200px;
				width: 200px;
				/* 不支持渐变的浏览器回退方案 */
				background-color: #f07575;
				background-image:
                /* 从上到下，从red渐变到10%的 green ，再渐变到25%的 blue ; 因为没写终点 ，再重复上面步骤到终点 */ repeating-linear-gradient(
					180deg,
					red,
					green 10%,
					blue 25%
				);
			}

			div.box2 {
				float: left;
				margin-left: 100px;
				height: 200px;
				width: 200px;
				/* 不支持渐变的浏览器回退方案 */
				background-color: #f07575;
				background-image:
                /* 从上到下，从red渐变到10%的 green ，再渐变到25%的 blue ，因为没写终点，从25%的blue到终点都是blue*/ linear-gradient(
					180deg,
					red,
					green 10%,
					blue 25%
				);
			}
		</style>
	</body>
</html>
